<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./jquery/jquery.2.2.4.js"></script>

    <style>
        #product-bg{width: 100%;background-color: #f2f2f2;}
        .product1{width: 1200px;height: 630px;margin: 0px auto;}
        .s_box{width: 350px;height: 350px;float: left;position: relative;border: 1px solid black;}
        .s_box img{width: 350px;height: 350px;}
        .s_box span{background: rgba(255,0,0,0.5);position: absolute;left:0;top:0;display: none;}
        .b_box{border: 1px solid black; width: 525px;height: 525px;float: left;overflow: hidden;display: none;position: relative}
        .b_box img{width: 1050px;height: 1050px;position: absolute;left:0;top:0;}
    </style>

</head>
<body>
    <div id="aaa"></div>
    <script>
        $("#aaa").load("http://localhost:3000/public.html .aaa")
    </script>
    <div id="product-bg">
        <div class="product1">
            <div class="p1-l">
                    <div class="s_box">
                        <img src="./images/computerEquipmentProduct/computerEquipmentProduct1/FILE1554e334e5184193b5939ff2d7fdc3b8.jpg" alt="">
                        <span></span>
                    </div>
                    <div class="b_box">
                        <img src="./images/computerEquipmentProduct/computerEquipmentProduct1/FILE1554e334e5184193b5939ff2d7fdc3b8.jpg" alt="">
                    </div>
            </div>
            <div class="p1-r"></div>
        </div>
    </div>
    <div id="qqq"></div>
    <script>
        $("#qqq").load("http://localhost:3000/public.html .qqq")
    </script>
</body>
<script>
    class Magnifier{
        constructor(){
            // 选择元素
            this.sBox = document.querySelector(".s_box");
            this.bBox = document.querySelector(".b_box");
            this.sSpan = document.querySelector(".s_box span");
            this.bImg = document.querySelector(".b_box img");
            // 绑定事件
            this.addEvent();
        }
        addEvent(){
            const that = this;
            // 实现绑定事件
            // 进入
            this.sBox.onmouseover = function(){
                // 显示
                that.show()
            }
            // 离开
            this.sBox.onmouseout = function(){
                // 隐藏
                that.hide()
            }
            // 移动
            this.sBox.onmousemove = function(eve){
                const e = eve || window.event;
                that.move({
                    x:e.pageX,
                    y:e.pageY
                })
            }
        }
        show(){
            // 显示
            this.bBox.style.display = "block";
            this.sSpan.style.display = "block";
            // 根据比例计算遮罩层的尺寸
            this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
            this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
        }
        hide(){
            // 隐藏
            this.bBox.style.display = "none";
            this.sSpan.style.display = "none";
        }
        move(ops){
            let l = ops.x - this.sSpan.offsetWidth/2 - this.sBox.offsetLeft;
            let t = ops.y - this.sSpan.offsetHeight/2 - this.sBox.offsetTop
            
            // 边界限定
            if(l<0) l=0;
            if(t<0) t=0;
            if(l > this.sBox.offsetWidth-this.sSpan.offsetWidth){
                l = this.sBox.offsetWidth-this.sSpan.offsetWidth
            }
            if(t > this.sBox.offsetHeight-this.sSpan.offsetHeight){
                t = this.sBox.offsetHeight-this.sSpan.offsetHeight
            }
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";

            // 计算遮罩层移动的比例
            const x = l / (this.sBox.offsetWidth-this.sSpan.offsetWidth);
            const y = t / (this.sBox.offsetHeight-this.sSpan.offsetHeight);
            // console.log(x, y)

            // 根据比例计算右侧大图要移动的距离
            this.bImg.style.left = x * (this.bBox.offsetWidth-this.bImg.offsetWidth) + "px";
            this.bImg.style.top = y * (this.bBox.offsetHeight-this.bImg.offsetHeight) + "px";
        }
    }
    new Magnifier();
</script>
</html>